<template>
  <div class="cover">
    <div class="header">
      <h2>我的书架</h2>
    </div>
    <ul v-if="data.booklist && $store.state.userdata">
      <li
        @click="readBook(item.chapter_id._id)"
        v-for="(item, index) in data.booklist"
        :key="index"
      >
        <div class="left">
          <p>
            {{ index + 1 }}
          </p>
        </div>
        <div class="center">
          <p>{{ item.book_id.book_title }}</p>
          <p>分类：{{ item.book_id.book_type }}</p>
          <p>作者：{{ item.book_id.book_author }}</p>
          <p @click.stop="readBook(item.new_chapter._id)">最新：{{item.new_chapter.chapter_title}}</p>
          <p @click.stop="readBook(item.chapter_id._id)">历史：{{item.chapter_id.chapter_title}}</p>
        </div>

        <div class="right">
          <button @click.stop="delBookOne(item._id)">删除</button>
        </div>
      </li>
    </ul>

    <h3 v-else  class="h3_con">
      <a href="/home/login">
      你还没有登陆 快去登陆吧
      </a>
    </h3>
  </div>
</template>

<script>
import {  onMounted, reactive } from "vue";
import { getAllCollections, delCollection } from "../../api/data";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
export default {
  setup() {
    const router = useRouter();
    const store = useStore();
    const data = reactive({
      booklist: [],
    });

    onMounted(() => {
      setTimeout(async () => {
        let data1 = await getAllCollections({
        user_id: store.state.userdata._id,
      });
      data.booklist =data1.data
      }, 250);
    });

    // 删除book
    async function delBookOne(_id) {
      await delCollection({
        _id,
      });

      let index = data.booklist.findIndex((item) => {
        return item._id == _id;
      });
      data.booklist.splice(index, 1);
    }

    // 跳转到book阅读页面
    const readBook = async (_id) => {
      router.push(`/home/chapter/${_id}`);
    };



    return {
      data,
      delBookOne,
      readBook
    };
  },
};
</script>

<style lang="scss" scoped>
.cover {
  border: 3px solid #88c6e5;

  .header {
    h2 {
      height: 41px;
      background-color: #e1eced;
      border-bottom: 1px dashed #88c6e5;
      font-size: 16px;
      padding-left: 15px;
      display: flex;
      align-items: center;
    }
  }

  ul {
    padding: 15px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    li {
      border: 1px dashed #ccc;
      width: 45%;
      margin-bottom: 15px;
      display: flex;
      padding: 10px;
      .left {
        margin-right: 10px;
        p {
          background-color: coral;
          padding: 5px 10px;
          border-radius: 3px;
          color: #fff;
        }
      }

      .center {
        flex: 1;
        p {
   
          height: 25px;
          font-size: 16px;
          color: #666;
          &:nth-of-type(1) {
            color: #333;
          }

          &:nth-last-of-type(1){
            &:hover{
              color: #369;
              cursor: pointer;
            }
          }
            &:nth-last-of-type(2){
            &:hover{
              color: #369;
              cursor: pointer;
            }
          }
        }
      }

      .right {
        button {
          outline: none;
          cursor: pointer;
          padding: 5px 10px;
          color: coral;
          border: 1px solid chocolate;
          background-color: none;
          &:active {
            border: none;
          }
        }
      }
    }
  }
}

.h3_con{
  min-height: calc(100vh - 240px);
  display: flex;
  justify-content: center;
  align-items: center;
  color: #369;
  font-size: 24px;
}
</style>